<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>Bone</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <%@ include file="/common/css.jsp"%>
    <!-- END GLOBAL MANDATORY STYLES -->
    <link href="${ctx}/resource/css/promo.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/resource/css/animate.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
    .form .form-actions{
    	padding-left: 300px;
	}
    </style>
    <script type="text/javascript">
    if(!'${param.topicId}') {
    	window.location.href="${ctx}/pages/error/404.jsp";
    }
    </script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed page-full-width">
<!-- BEGIN HEADER -->
<%@ include file="/common/header.jsp"%>
<!-- END HEADER -->

<!--content start-->
<div class="tab-pane row-fluid profile-account" id="tab_1_3" style="margin-top:40px">

    <div class="row-fluid">
        <div class="span2"></div>
        <div class="span8">
            <h3 class="page-title">
                投票结果统计
            </h3>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a href="${ctx}/vote/index.do">首页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">投票</a></li>
            </ul>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span2"></div>
        <div class="span8" >
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet box blue" >
                <div class="portlet-title" style="padding:0px 1px 1px 1px;">

                </div>
                <div class="portlet-body form">
                    <!-- BEGIN FORM-->
                    <form action="#" class="form-horizontal">

                        <div class="control-group" >
                            <img id="adv" src="" style="height:200px;width:100%;">
                        </div>

                        <div class="control-group">
                            <div class="portlet box purple">

                                <div class="portlet-title">

                                    <div class="caption"><i class="icon-reorder"></i>
                                    	<span id="chartTitle"></span>
                                    </div>

                                    <div class="tools">

                                    </div>

                                </div>

                                <div class="portlet-body">
									<div id="main" style="height:400px"></div>    
                                </div>

                            </div>
                        </div>
                        <div class="control-group">

                            </div>
                        <div class="form-actions" >
                            <span class="btn green" style="cursor:default">投票截止时间：<span id="deadline" style="cursor:default"></span> </span>
                        </div>
                    </form>
                    <!-- END FORM-->
                </div>
            </div>
            <!-- END SAMPLE FORM PORTLET-->


        </div>
    </div>
</div>
<!--end tab-pane-->

<!-- BEGIN FOOTER1 -->
<%@ include file="/common/footer.jsp"%>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS -->
<!-- BEGIN CORE PLUGINS -->
<%@ include file="/common/js.jsp"%>
<!-- END CORE PLUGINS -->
<script src="${ctx}/resource/js/app.js"></script>
<script src="${ctx}/resource/echarts/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
   paths: {
       echarts: '${ctx}/resource/echarts'
   }
});

$(document).ready(function(){
	App.init();
    $('#promo_carousel').carousel({
        interval: 10000,
        pause: 'hover'
    });
    
   $.getJSON("${ctx}/vote/statistics.do?topicId=${param.topicId}", function(rs){
	   if(!rs || !rs.topic) {
		   	layer.alert('您所访问的投票主题不存在或已被删除', {icon: 3}, function(idx){
		   		window.location.href = '${ctx}/vote/index.do';
			});
	   }
	   
	   $("#adv").attr("src","${ctx}/"+rs.topic.advert);
	   $("#deadline").attr("src","${ctx}/"+rs.topic.advert);
	   $("#chartTitle").html(rs.topic.title);
	   $("#deadline").html(timeStamp2String(rs.topic.deadline));
	   var legend = new Array();
	   var data = new Array();
	   
	   $.each(rs.data,function(i){
		    var obj = rs.data[i];  
		    legend.push(obj.name);
		    data.push(obj.value);
		});
	   
		// 配置加载图表
		require([ 'echarts', 
		          'echarts/chart/bar', 
		          'echarts/chart/pie'], function(ec) {
			// 初始化图表
			var myChart = ec.init(document.getElementById('main'));
	
			if(rs.topic.type == 0) {
				var option = {
				    title : {
				    	text : rs.topicName,
						subtext : '参与投票人数：'+rs.voterCount,
				        x:'center',
				        y:'bottom'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient : 'vertical',
				        x : 'right',
						y : 'center',
				        data: legend
				    },
				    calculable : false,
				    series : [
				        {
				            name:'投票项',
				            type:'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data: rs.data
				        }
				    ]
				}
			} else if(rs.topic.type == 1) {
				var option = {
					title : {
						text : rs.topic.title,
						subtext : '参与投票人数：'+rs.voterCount
					},
					tooltip : {
						trigger : 'axis',
						formatter: "{b} : {c}"
					},
					calculable : false,
					xAxis : [ {
						type : 'value',
						boundaryGap : [ 0, 0.01 ]
					} ],
					yAxis : [ {
						type : 'category',
						data : legend,
						show : false
					} ],
					series : [ {
						type : 'bar',
						data : data
					} ]
				};
			} else {
				alert("暂无数据");
			}
			
			myChart.setOption(option);
		});
	 });
  });
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>